{% extends 'ApplicationToolsBundle::layout.html.twig' %}

{% block title %}Drag and drop{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/applicationtools/css/drag_and_drop/dad-e1/draggable.css') }}" rel="stylesheet" type="text/css" media="all" />
    {# Example2 <link href="{{ asset('bundles/applicationtools/css/drag_and_drop/dad-e2/draggable.css') }}" rel="stylesheet" type="text/css" media="all" />#}
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('bundles/applicationtools/js/drag_and_drop/dad-e1/draggable.js') }}" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready( function(){
			$('#wrap-left div').filter(':not(.with-handle)').drags();
			$('#wrap-left .with-handle').drags({handle:"strong"});
		});
	</script>

{# Example2
    <script src="{{ asset('bundles/applicationtools/js/drag_and_drop/dad-e2/draggable.js') }}" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready( function(){
			$('#wrap-left div').drags();
		});
	</script>
#}
{% endblock %}

{% block body %}

<div class="section">
    <div class="grid_16">
        <h2>Drag and drop</h2>
		<h4>Example1 - <a target="_blank" href="http://reader-download.googlecode.com/svn/trunk/jquery-draggable/index.html">Source</a></h4>
		<h4>Example2 - <a target="_blank" href="http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/">Source</a></h4>
		<div id="wrap-left">
			<div class="with-handle" style="width:226px;"><strong>I'm a dragging handle<a href="#" onclick="this.parentNode.parentNode.style.visibility='hidden';return false;">&#215;</a></strong>Define the <code>handle</code> option to make a simple draggable dialog box (limited for direct children).</div>
			<div><a href="draggable.js" target="_blank">Download Source</a></div>
			<div><a href="draggable.min.js" target="_blank">Download Minified</a></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div class="clear"></div>
		</div>
    </div>
    <div class="clear"></div>
</div>

{% endblock %}